<ul class="pull-left" id="left-nav">
    <li class="hidden-lg hidden-md hidden-sm">
        <div class="logo-mob clearfix">
            <h2>
                <div class="fs1" aria-hidden="true" data-icon="&#xe0db;"></div>
                <span>Cloud Admin</span>
            </h2>
        </div>
    </li>
    <li class="hidden-xs">
        <a href="#" class="btn btn-info btn-sm">V1</a>
    </li>
    <li>
        <div class="custom-search hidden-sm hidden-xs pull-left">
            <input type="text" class="search-query" placeholder="Search here">
            <i class="fa fa-search"></i>
        </div>
    </li>
    </ul>
    <div class="pull-right">
    <ul id="mini-nav" class="clearfix">
        <li class="list-box hidden-xs">
            <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
                <div class="fs1" aria-hidden="true" data-icon="&#xe129;"></div>
            </a>
            <span class="info-label red-bg animated rubberBand">7</span>
            <ul class="dropdown-menu flipInX animated messages">
                <li class="dropdown-header">You have 7 messages</li>
                <li>
                    <div class="icon">
                        <img src="assets/lib/img/admin10.png" alt="Browser">
                    </div>
                    <div class="details">
                        <strong class="text-danger">Willams</strong>
                        <span>Firefox is a free, open-source web browser from Mozilla.</span>
                    </div>
                </li>
                <li>
                    <div class="icon">
                        <img src="assets/lib/img/admin6.png" alt="Browser">
                    </div>
                    <div class="details">
                        <strong class="text-info">Sunny</strong>
                        <span>Internet Explorer is a free web browser from Microsoft.</span>
                    </div>
                </li>
                <li>
                    <div class="icon">
                        <img src="assets/lib/img/admin3.png" alt="Browser">
                    </div>
                    <div class="details">
                        <strong class="text-info">James</strong>
                        <span>Safari is known for its sleek design and ease of use.</span>
                    </div>
                </li>
            </ul>
        </li>
        <li class="list-box hidden-xs">
            <a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
                <div class="fs1" aria-hidden="true" data-icon="&#xe0e3;"></div>
            </a>
            <span class="info-label blue-bg animated rubberBand">3</span>
            <ul class="dropdown-menu fadeInUp animated messages">
                <li class="dropdown-header">Recent Chat</li>
                <div class="chats clearfix">
                    <p class="chat them">
                        James, I'm going to be a little late.
                    </p>

                    <p class="chat me">
                        S'Okay, Dude. You know your lines...?
                    </p>

                    <p class="chat them">
                        I know em, I don't know what order they come in...
                    </p>

                    <p class="chat me">
                        We'll work it out...
                    </p>
                </div>
            </ul>
        </li>
        <li class="list-box hidden-xs dropdown">
            <a id="drop3" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
                <div class="fs1" aria-hidden="true" data-icon="&#xe0ca;"></div>
            </a>
            <span class="info-label green-bg animated rubberBand">6</span>
            <ul class="flipInX animated dropdown-menu stats-widget clearfix">
                <li>
                    <h5 class="text-success">$37895</h5>

                    <p>Revenue <span class="text-success">+2%</span></p>

                    <div class="progress progress-xs">
                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
                             aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                            <span class="sr-only">40% Complete (success)</span>
                        </div>
                    </div>
                </li>
                <li>
                    <h5 class="text-info">47,892</h5>

                    <p>Downloads <span class="text-info">+39%</span></p>

                    <div class="progress progress-xs">
                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40"
                             aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                            <span class="sr-only">40% Complete (info)</span>
                        </div>
                    </div>
                </li>
                <li>
                    <h5 class="text-danger">28214</h5>

                    <p>Uploads <span class="text-danger">-7%</span></p>

                    <div class="progress progress-xs">
                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40"
                             aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                            <span class="sr-only">40% Complete (danger)</span>
                        </div>
                    </div>
                </li>
            </ul>
        </li>
        <li class="list-box hidden-xs dropdown">
            <a id="drop1" href="#" role="button" class="dropdown-toggle current-user" data-toggle="dropdown">
                Sandy <b class="caret"></b>
            </a>
            <ul class="dropdown-menu sm fadeInUp animated messages">
                <li class="dropdown-content">
                    <a href="#">Edit Profile</a>
                    <a href="#">Change Password</a>
                    <a href="#">Settings</a>
                    <a href="login.html">Logout</a>
                </li>
            </ul>
        </li>
        <li class="list-box hidden-lg hidden-md hidden-sm" id="mob-nav">
            <a href="#">
                <i class="fa fa-reorder"></i>
            </a>
        </li>
    </ul>
</div>